<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/WEB-INF/tld/extend.tld" prefix="extend"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<head>
		<title>乐盈培训网 - 管理课程类别</title>
		<script language="JavaScript" src="<extend:contextPath name="contextPath"/>/scripts/common.js"></script>
		<script language="JavaScript" src="<extend:contextPath name="contextPath"/>/scripts/jquery.js"></script>
	</head>	


<body>
	<div style="position:absolute; height:100%; width:1045px;">
		<jsp:include page="../header.jsp"></jsp:include>
		<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size:12px;">
				<tr>
					<td height="25px">
						您现在的位置：<a href="<extend:contextPath name="contextPath"/>" class="normal_link">首页</a> >> 
						<a href="<extend:contextPath name="contextPath"/>/admin/goToAdmin.do" class="normal_link">admin</a> >> 课程类别
					</td>
				</tr>
		</table>
		<html:form action="/addCourseCategory.do?method=addCourseCategory">		
			<table style="font-size:14px;">
				<tr>
					<td>课程类别:</td>
					<td><html:text property="courseCategory"/></td>
				</tr>
				<tr>
					<td><html:submit>添加课程类别</html:submit></td>
				</tr>
			</table>
		</html:form>
	
		<html:form action="deleteCourseCategory.do?method=deleteCourseCategory">
			<table style="margin-top:5px; font-size:14px;">
				<c:choose>
					<c:when test='${empty courseCategoryList}'>
						<c:if test='${courseCategoryList != null}'>
							<tr><td height="20">没有找到符合记录。</td></tr>	
						</c:if>
					</c:when>	
				<c:otherwise>
					<tr>
						<td height="30">
							<input type="checkbox" width="20" name="masterCheckbox" onclick="toggleCheckboxes(form.deleteSelection, this.checked)">
						</td>
						<td align="center" width="50">No.</td>
						<td align="center" width="300">名称</td>
						<td width="50">&nbsp;</td>
					</tr>
					<c:forEach var="courseCategory" items="${courseCategoryList}" varStatus="status">
						<tr>
							<td height="25">
								<html:multibox property="deleteSelection" 
									onclick="toggleMasterCheckbox(masterCheckbox, this.checked, deleteSelection)">
									1
								</html:multibox>
							</td>
							<td align="center"><c:out value="${status.index + 1}" /></td>
							<td align="center">
								<DIV id="<c:out value="${status.index + 1}" />edit"><c:out value="${courseCategory}" /></DIV>
							</td>
							<td id="cc_delete" align="center">
								<a class="href_delete" title="删除" href="#" 
									onclick="javascript:deleteCourseCategory('<c:out value="${status.index + 1}" />edit')">&nbsp;</a>
							</td>
						</tr>					
					</c:forEach>
				</c:otherwise>
			</c:choose>
			</table>
		</html:form>
	</div>
</body>

<script type="text/javascript">
	function validateCategoryName(categoryName)
	{
		//not empty and duplicate
	}

	$(document).ready(function(){
		$("DIV[id$='edit']").click(function(){
			
				gotoEdit(this);
		});
	});
	
	function gotoEdit(oldDiv)
	{
		var parent = oldDiv.parentNode;
			
		var editDIV = document.createElement("div");
		var e_input = document.createElement("input");
		e_input.type = "text";
		e_input.value = oldDiv.innerText;						
		editDIV.appendChild(e_input);
			
		var tooltip = document.createElement("label");
		tooltip.id = "tip";		
		editDIV.appendChild(tooltip);		
			
		var saveButton = document.createElement("input");
		saveButton.type = "button";
		saveButton.value = "保存";
		saveButton.onclick = function(){save(oldDiv.innerText, e_input.value, parent, oldDiv.id, editDIV)};
		editDIV.appendChild(saveButton);
			
		var cancelButton = document.createElement("input");
		cancelButton.type = "button";
		cancelButton.value = "取消";
		cancelButton.onclick = function(){cancel(parent, oldDiv.id, oldDiv.innerText, editDIV)};
		editDIV.appendChild(cancelButton);
			
		parent.removeChild(oldDiv);
		parent.appendChild(editDIV);
	}
	
	function save(oldValue, newValue, parent, oldId, newDIV)
	{
		
		document.getElementById("tip").innerHTML = " 正在保存.... ";
		
		$.ajax({
			type: "post",
			url: "<extend:contextPath name='contextPath'/>/admin/updateCourseCategory.do?method=updateCourseCategory",
			data: {oldValue:oldValue, newValue:newValue},
			beforeSend: function(XMLHttpRequest){
			},
			success: function(data, textStatus){
				
				var oldDIV = document.createElement("div")
				oldDIV.id = oldId;
				oldDIV.innerText = newValue;
				oldDIV.onclick = function(){gotoEdit(oldDIV)};
				
				parent.removeChild(newDIV);
				parent.appendChild(oldDIV);
			},
			complete: function(XMLHttpRequest, textStatus){
					//HideLoading();
			},
			error: function(){
				alert("failure");
			}	
		});
	}
	
	function cancel(parent, oldId, oldInnerText, newDIV)
	{
		var oldDIV = document.createElement("div");
		oldDIV.id = oldId;
		oldDIV.innerText = oldInnerText;
		oldDIV.onclick = function(){gotoEdit(oldDIV)};
		
		parent.removeChild(newDIV);
		parent.appendChild(oldDIV);
	}
	
	function deleteCourseCategory(id)
	{
		if(confirm("确定要删除吗？相关课程与教师信息也将被删除")) {
		
		var category = document.getElementById(id).innerText;
		$.ajax({
			type: "post",
			url: "<extend:contextPath name='contextPath'/>/admin/deleteCourseCategory.do?method=deleteCourseCategory",
			data: {categoryName:category},
			beforeSend: function(XMLHttpRequest){
			},
			success: function(data, textStatus){
			
				var div = document.getElementById(id);
				var tdParent = div.parentNode;
				var trParent = tdParent.parentNode;
				var tableParent = trParent.parentNode;
				tableParent.removeChild(trParent);
			},
			complete: function(XMLHttpRequest, textStatus){
					//HideLoading();
			},
			error: function(){
				alert("failure");
			}	
		});
		}
	}
</script>

</html>